<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Ruby-Align - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">ruby-align</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">IE5</i></b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other International Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="unibidi.htm">unicode-bidi</a><br>
    <a href="direction.htm">direction</a><br>
    <a href="roverhang.htm">ruby-overhang</a><br>
    <a href="rposition.htm">ruby-position</a><br>
    <a href="linebreak.htm">line-break</a><br>
    <a href="wordbreak.htm">word-break</a><br>
    <a href="writingmode.htm">writing-mode</a><br>
    <a href="imemode.htm">ime-mode</a><br></td>
    <td valign=top><a href="textjustify.htm">text-justify</a><br>
    <a href="textaspace.htm">text-autospace</a><br>
    <a href="textkspace.htm">text-kashida-space</a><br>
    <a href="lflow.htm">layout-flow</a><br>
    <a href="lgrid.htm">layout-grid</a><br>
    <a href="lgmode.htm">layout-grid-mode</a><br>
    <a href="lgtype.htm">layout-grid-type</a><br>
    <a href="lgline.htm">layout-grid-line</a><br>
    <a href="lgchar.htm">layout-grid-char</a><br>
    <a href="lgcharspace.htm">layout-grid-char-spacing</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">auto</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td><b class="tagname">ruby</b></td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA<br></td></tr>
<tr><th align=left><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/rubyAlign.asp">Microsoft 
        MSDN Reference</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This property specifies the horizontal alignment of the Ruby Text (RT)
        relative to the RUBY element content.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">auto</b></dt>
<dt>[<b><i class="fs">IE5</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        The browser determines how the Ruby Text (RT) is to be aligned.
        Content from Asian character sets will be aligned using the
        'distribute-space' method, while non-Asian character content
        will be aligned using the 'center' method.</dd>

<dt><b class="subheading">left</b></dt>
<dt>[<b><i class="fs">IE5</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        The left side of the Ruby Text (RT) is aligned with the left side of
        the Ruby content.</dd>

<dt><b class="subheading">center</b></dt>
<dt>[<b><i class="fs">IE5</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        The Ruby Text (RT) is centered relative to the Ruby content</dd>

<dt><b class="subheading">right</b></dt>
<dt>[<b><i class="fs">IE5</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        The right side of the Ruby Text (RT) is aligned with the right side of
        the Ruby content.</dd>

<dt><b class="subheading">distribute-letter</b></dt>
<dt>[<b><i class="fs">IE5</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        If the width of the content of the Ruby Text (RT) is less than the width of
        the RUBY content, the letter-spacing of the RT content is set so that
        the content is evenly distributed across the width of the RUBY content.
        For RT widths greater than or equal to the width of the RUBY content, this
        value is treated like 'center'.</dd>

<dt><b class="subheading">distribute-space</b></dt>
<dt>[<b><i class="fs">IE5</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        If the width of the content of the Ruby Text (RT) is less than the width of
        the RUBY content, white space is added to the right and left of the RT
        content equal to half the kerning value of the RT content. Remaining
        horizontal space in the RT content is evenly distributed across the width
        of the RUBY content. For RT widths greater than or equal to the width of
        the RUBY content, this value is treated like 'center'.</dd>

<dt><b class="subheading">line-edge</b></dt>
<dt>[<b><i class="fs">IE5</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        If the Ruby Text (RT) is next to or adjacent to a line edge, it is aligned
        to that edge. Otherwise, it is center aligned. The IE reference is not very
        clear on what a "line edge" specifically <em>IS</em>.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">ruby</b>
        { <span class="property">ruby-align:</span> right;
        <span class="property">ruby-position:</span> above;
        <span class="property">ruby-overhang:</span> whitespace }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">ruby</b>
        <span class="tagattrib">STYLE</span>=&quot;<span class="property">ruby-align:</span>
        right; <span class="property">ruby-position:</span> above;<br>
        <span class="property">ruby-overhang:</span> whitespace&quot;&gt;Ruby base
        content&lt;<b class="tagname">rt</b>&gt;Ruby
        text&lt;/<b class="tagname">rt</b>&gt;&lt;/<b class="tagname">ruby</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>Nothing to report yet.
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>